<template>
  <div class="page">
    <div class="head-bar">
      <div class="userInfo">
        <div class="hearPicture">
          <img v-if="userInfo.userPicture" :src="userInfo.userPicture" alt="">
        </div>
        <div class="info">
          <span class="title">用户名</span>
          <p v-if="userInfo.userName" class="name">{{ userInfo.userName }}</p>
          <span class="title">联系方式</span>
          <p v-if="userInfo.userPhone" class="phone">{{ userInfo.userPhone }}</p>
          <span class="title">账户余额</span>
          <p v-if="getUserBalance" class="balance">{{ getUserBalance }}</p>
          <button v-if="!pageState.isTopUp" class="balance-top-up-btn" @click="openTopUp">账户充值</button>
          <button v-if="!pageState.isTopUp" class="balance-top-up-btn" @click="logOut">注销登录</button>
          <br>
<!--          <input type="file" v-if="!pageState.isTopUp" ref="userPicture" accept="image/*" @change="changePicture" value="替换头像">-->
          <div class="topUp-bar" v-if="pageState.isTopUp">
            <input type="number" min="0" v-model="TopUpValue">
            <button @click="commitTopUp">充值</button>
            <button @click="cancleTopUp">取消</button>
          </div>
        </div>
      </div>
      <div class="orders-statistics">
        <span class="title">订单数</span>
        <p>{{ userOrders.length }}</p>
      </div>
    </div>
    <div class="body-bar">
      <h1>订单列表</h1>
      <ul class="orderContainer">
        <li class="title">
          <p>房间图片</p>
          <p>订单编号</p>
          <p>订单金额</p>
          <p>订单状态</p>
        </li>
        <li class="order" v-for="(order, index) in userOrders" :key="index" @click="openOrderDetail(order)">
          <orderItem :order="order" ></orderItem>
        </li>
      </ul>
    </div>
    <orderDetail></orderDetail>
  </div>
</template>

<script>
import orderItem from "@/components/OrderItem";
import orderDetail from "@/components/OrderDetail";

export default {
  name: "OrdersPage",
  components:{
    orderItem,
    orderDetail
  },
  data(){
    return{
      userInfo:{
        name:"",
        phone:"",
      },
      userOrders:{},
      TopUpValue:0,
      pageState:{
        isTopUp:false,
      }
    }
  },
  computed:{
    storeUserOrders(){
      return this.$store.state[1].userOrders;
    },
    getUserBalance(){
      return this.$store.state[1].userBalance || window.sessionStorage.getItem('USERBALANCE') || '';
    }
  },
  mounted() {
    this.initUserInfo();
    this.getUserOrders();
  },
  methods:{
    initUserInfo() {
      let localUserInfo = JSON.parse(window.localStorage.getItem("USERINFO"));
      this.userInfo = localUserInfo;
    },
    getUserOrders(){
      this.$store.dispatch("getUserOrdersOfToken");
    },
    openOrderDetail(data) {
      // 激活组件orderDetail，display：flex从而显示。$on是在OrderDetail组件中挂载的。
      this.$bus.$emit("openOrderDetail");
      this.$bus.$emit("getOrderData", data, this.userInfo.name);
    },
    openTopUp(){
      // 打开充值面板
      this.pageState.isTopUp = true;
    },
    commitTopUp(){
      // 提交充值
      if (this.TopUpValue == 0) return alert('Waring：请输入充值金额！');
      this.$store.dispatch("updataUserBalance", {addBalance:this.TopUpValue});
      this.pageState.isTopUp = false;
      this.TopUpValue=0;
    },
    logOut(){
      // 注销登录
      window.localStorage.removeItem("TOKEN");
      window.localStorage.removeItem("USERINFO");
      window.sessionStorage.removeItem('USERBALANCE');
      this.$router.push('/');
    },
    cancleTopUp(){
      //  取消充值
      this.pageState.isTopUp=false;
    },
    changePicture(){
      //用户替换头像，用FormData对象将图片文件存放，以便发送给服务器
      let file = this.$refs.userPicture.files[0];
      let formData = new FormData();
      formData.append("user_pic", file);
      console.log(formData.get("user_pic"));

      //上传文件（临时写法）
      this.$axios.post("/api/Base/uploadImg", formData).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err);
      });

    }
  },
  watch:{
    storeUserOrders(item1,item2){
      // 对store仓库数据进行一个监听，如果发生改变，则刷新订单列表
      this.userOrders = this.storeUserOrders;
    }
  },
}
</script>

<style scoped lang="less">
.page{
  width: 1240px;
  min-height: 100vh;

  .head-bar{
    width: 100%;
    height:30vh;
    background: #51446e;
    padding: 10px;
    display: flex;
    justify-content: flex-start;

    .orders-statistics{
      .title{
        color: #FFFFFF;
        font-weight: bolder;
        display: block;
        margin-top: 10px;
      }
      p{
        color: #ffb508;
      }
    }

    .userInfo{
      width: 50%;
      height: 100%;
      padding: 10px;
      display: flex;
      justify-content: flex-start;

      .hearPicture{
        height: 100%;
        width: 200px;
        img{
          width: 100%;
          height: 100%;
          display: block;
          background-color: #ffb508;
        }
      }

      .info{
        margin-left: 30px;
        .title{
          color: #FFFFFF;
          font-weight: bolder;
          display: block;
          margin-top: 10px;
        }
        p{
          color: #ffb508;
        }

        .balance-top-up-btn{
          width: 80px;
          line-height: 30px;
          border: none;
          border-radius: 5px;
          margin-right: 10px;

          user-select: none;
          cursor: pointer;
          &:hover{
            background-color: #ffb508;
            color: #FFFFFF;
          }
        }

        .topUp-bar{
          display: flex;
          justify-content: flex-start;
          width: 100%;
          height: 30px;
          position: relative;
          top: -20px;

          input{
            width: 70%;
            height: 100%;
            border: none;
            outline: none;
            padding: 10px;
            border-radius: 5px 0 0 5px;
          }
          button{
            width: 30%;
            height: 100%;
            border: none;
            outline: none;
            user-select: none;
            cursor: pointer;
            &:last-child{
              border-radius: 0 5px 5px 0;
              background-color: rgba(203, 199, 199, 0.99);
            }
          }
        }
      }
    }
  }

  .body-bar{
    width: 100%;
    min-height: 60vh;
    background: #ffb508;
    padding: 50px;
    gap: 45px;

    .orderContainer {
      list-style: none;

      .title {
        display: flex;
        justify-content: flex-start;
        p{
          width: 25%;
        }
      }
    }


  }
}
</style>